<template>
	<view class="main" :style="{backgroundImage: 'url(' +  IMAGE_URL +'/static/images/user/point-bg.png)' }">
		<header-vue :back="true" :searchStatus="true" bgColor="transparent">
			<template v-slot:search>
				<view class="select-box">
					<view class="" @click="goBack">
						<u-icon name="arrow-left" size="18" color="#222222"></u-icon>
					</view>
					<view class="order-title">积分中心</view>
					<view class="right-title" @click="pointShow = true">积分规则</view>
				</view>
			</template>
		</header-vue>

		<view class="point-icon-box">
			<view class="d-flex align-items-center">
				<view class="point-icon">
					<image :src=" IMAGE_URL + '/static/images/user/point-icon.png'"></image>
				</view>
				<view class="font24 text-333333">我的积分</view>
			</view>
		</view>
		<view class="position-relative pl-32rpx">
			<view class="fz-64 text-333333 pt-20rpx mb-40rpx">100</view>
			<view class="position-absolute use-text text-333333 font32" @click="toPointList">去使用</view>
			<view class="point-img position-absolute"><image :src= "IMAGE_URL + '/static/images/user/point-img.png' "></image></view>
		</view>
		<view class="px-32rpx" style="box-sizing: border-box;">
			<view class="card-box px-28rpx pt-22rpx pb-36rpx mb-28rpx" :style=" {backgroundImage: 'url(' + IMAGE_URL +'/static/images/user/card-bg.png)'}">
				<view class="d-flex justify-content-start align-items-center mb-60rpx">
					<view class="text-333333 fz-28">签到领积分</view><view class="fz-20 text-999999 pl-4rpx" >已连续签到2天</view>
				</view>
				<view class="d-flex justify-content-between">
					<view v-for="item in singList" :key="item">
						<view class="sign-tab py-22rpx text-center" >
							<text class="fz-24 text-333333 text-center">+10</text>
							<view class="noSelected-icon">
								<image :src= "IMAGE_URL + '/static/images/user/noSelected.png'"></image>
								<!-- <image src="/static/images/user/Selected.png"></image> -->
							</view>
						</view>
						<view class="fz-24 text-999999 mt-12rpx">{{item}}</view>
					</view>
				</view>
				<view class="sing-btn">签到</view>
			</view>
		</view>
		<view class="px-32rpx">
			<view class="d-flex align-items-center justify-content-center calendar-bg mb-38rpx" @click="show = true">
				<view class="text-333333 fz-24">2月12日</view>
				<view class="arrow-down pl-12rpx">
					<image :src= "IMAGE_URL + '/static/images/user/arrow-down.png'"></image>
				</view>
			</view>
			<view class="point-list-box px-28rpx py-28rpx">
				
				<view class="tab-container">
				  <view
				    class="tab-item"
				    v-for="(item, index) in typeList"
				    :key="index"
				    :class="{ active: typeIndex == index }"
				    @click="typeIndex = index"
				  >
				    <text class="tab-text">{{ item.name }}</text>
				    <view class="tab-line" v-if="typeIndex == index"></view>
				    <view class="tab-line2" v-else></view>
				  </view>
				</view>
				
				
				<view class="point-list d-flex justify-content-between align-content-center mb-20rpx pt-20rpx">
					<view>
						<view class="fz-28 text-333333 mb-12rpx">签到第一天</view><view class="fz-24 text-999999">2025-04-06 15:45</view>
					</view>
					<view class="fz-32 text-333333">+10</view>
				</view>
				<view class="point-list d-flex justify-content-between align-content-center mb-20rpx pt-20rpx">
					<view>
						<view class="fz-28 text-333333 mb-12rpx">签到第二天</view><view class="fz-24 text-999999">2025-04-06 15:45</view>
					</view>
					<view class="fz-32 text-333333">+10</view>
				</view>
			</view>
		</view>
		
		
		<u-calendar :show="show" :mode="mode" @confirm="confirm" :close= "calendarClose"></u-calendar>
		
		<u-popup :show="pointShow" mode="center" @close="priceShow = false" :round="28">
			<view class="price-tip">
				<view class="flex between position-relative">
					<view class="font32 tip-name">积分规则</view>
					<i class="iconfont icon-close font32" @click="pointShow=false"></i>
				</view>
				<view class="d-flex align-items-center py-28rpx">
					<view class="point-icon">
						<image :src=" IMAGE_URL + '/static/images/user/point-icon.png' "></image>
					</view>
					<view class="font24 text-333333">积分获取规则</view>
				</view>
				
				<view class="popup-tip1 text-333333 fz-24  py-10rpx">
					<view class="pt-10rpx mb-10rpx">1.每日签到得积分</view><view class="pt-10rpx mb-10rpx">2.交生活费用送积分</view>
				</view>
				<view class="d-flex align-items-center py-28rpx">
					<view class="point-icon">
						<image :src= "IMAGE_URL + '/static/images/user/pointi-icon-blue.png'"></image>
					</view>
					<view class="font24 text-333333">积分兑换规则</view>
				</view>
				<view class="popup-tip2 text-333333 fz-24  py-10rpx mb-60rpx">
					<view class="pt-10rpx mb-10rpx">1、高频服务项目10%抵扣</view>
					<view class="pt-10rpx mb-10rpx">2、中频服务项目20%抵扣</view>
					<view class="pt-10rpx mb-10rpx">3、低频服务项目30%抵扣</view>
				</view>
				<view class="popup-btn" @click="pointShow=false">确认</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import headerVue from '@/components/header.vue'
	import appConfig from '@/config/app.js'
	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				singList:['第一天','第二天','第三天','第四天','第五天','第六天','第七天'],
				singIndex:0,
				show:false,
				mode:'single',
				typeIndex:0,
				pointShow:false,
				typeList: [
				  {
				    name: "获取记录",
				  },
				  {
				    name: "使用记录",
				  },
				],
			}
		},
	onLoad() {
		console.log(this.IMAGE_URL)
	},
		components: {
			headerVue,
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			toPointList(){
				uni.navigateTo({
					url:'/views-user/points/points-list'
				})
			},
			confirm(e) {
				this.show = false
						console.log(e);
					},
			calendarClose(){
				this.show = false
			}
}
	}
</script>

<style lang="scss" scoped>
	@import url("../../common/public.scss");
	.main {
		width: 100%;
		height: 100vh;
		//background-image: url('/static/images/user/point-bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.select-box {
		padding: 0 32rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		//background: $uni-bg-color;
		box-sizing: border-box;

		.order-title {
			font-size: 32rpx;
			color: #333333;
		}
		.right-title {
			color: #DF9824;
			font-size: 28rpx;
		}
	}
	.point-icon-box{
		padding: 32rpx 32rpx 0;
		box-sizing: border-box;
	}
	.point-icon{
		width: 24rpx;
		height: 24rpx;
		image{
			width: 24rpx;
			height: 24rpx;
			vertical-align: top;
		}
	}
	.use-text{
		width: 144rpx;
		height: 60rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 60rpx 0rpx 0rpx 60rpx;
		right:0;
		top:0;
		line-height: 60rpx;
		text-align: center;
	}
	.point-img{
			width: 250rpx;
			height: 228rpx;
			right:124rpx;
			top:0;
			image{
				width: 250rpx;
				height: 228rpx;
			}
	}
	.card-box{
		height: 432rpx;
		position: relative;
		//background-image: url('/static/images/user/card-bg.png');
		background-repeat: no-repeat;
		 background-size: 100% 100%;
		 z-index: 5;
		
	}
		
	.noSelected-icon{
		width: 36rpx;
		height: 36rpx;
		margin:12rpx auto;
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.sign-tab{
		width: 72rpx;
		height: 132rpx;
		background: #EEEEEE;
		border-radius: 60rpx;
		box-sizing: border-box;
	}
	.pointActive{
		background:#FFAB21;
	}
	.sing-btn{
		width: 240rpx;
		height: 68rpx;
		background: #FFAB21;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		text-align: center;
		line-height: 68rpx;
		color: #ffffff;
		font-size: 32rpx;
		margin: 0 auto;
		margin-top: 52rpx;
	}
	.arrow-down{
		width: 20rpx;
		height: 20rpx;
			
		image{
			width: 20rpx;
			height: 20rpx;
				vertical-align: top;
		}
	}
	.calendar-bg{
			width: 186rpx;
			height: 52rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 60rpx ;
			
	}
	.point-list-box{
		
		height: 604rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 20rpx;
	}
	
	.tab-container {
	  display: flex;
	  align-items: center;
		justify-content: center;
	  padding: 16rpx 32rpx 12rpx 32rpx;
	}
	
	.tab-item {
	  position: relative;
	  margin: 0 48rpx 40rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	
	.tab-text {
	  font-size: 32rpx;
	  color: #666666;
	}
	
	.tab-item.active .tab-text {
	  color: #333333;
	  font-size: 32rpx;
	}
	
	.tab-line {
	  margin-top: 8rpx;
	  width: 28rpx;
	  height: 6rpx;
	  background: #FFAB21;
	  border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	
	.tab-line2 {
	  margin-top: 8rpx;
	
	  width: 28rpx;
	  height: 6rpx;
	  background: transparent;
	  border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	.price-tip{
		width: 686rpx;
		height: 780rpx;
		background: #FFFFFF;
		
		padding:  40rpx 64rpx;
		box-sizing: border-box;
	
	
		border-radius: 20rpx;
		
		.iconfont-position{
			justify-content: flex-end;
		}
		.tip-name{
			color:$uni-text-color;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		.icon-close{
			position: absolute;
			right:0;
			top:0;
		}
		
		.tip-price{
			color:#FF3737;
		}
		.tip-text{
			margin-top: 24rpx;
			color:$uni-text-color-grey;
		}
	
		.popup-tip1,.popup-tip2{
			padding-left: 170rpx;
			box-sizing: border;
			background: #FFFBF4;
			border-radius: 12rpx;
		}
		.popup-tip2{
			
			background: #F3FAFF;
			
		}
		.popup-btn{
			//width: 560px;
			height: 76rpx;
			line-height: 76rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7,133,207,0.16);
			border-radius: 60rpx;
			color:$uni-text-color-inverse;
			text-align: center;
		
		}
	}
</style>